<div class="p-4">
    <div class="container">
        <h1>Users (Total: {{total}})</h1>
        <a class="btn btn-sm btn-success mb-2" (click)="generateUser()">Generate User</a>
        <!--Raw Filter-->
        <input class="form-control col-md-5" [(ngModel)]="nameFilterValue" (ngModelChange)="onNameFilterChange($event)"
               placeholder="Filter by Username..."/>
        <input type="number" class="form-control col-md-5" [(ngModel)]="ageFilterValue"
               (ngModelChange)="onAgeFilterChange($event)"
               placeholder="Filter by Max Age..."/>

        <table class="table table-striped">
            <thead>
            <tr>
                <th style="width: 30%">First Name</th>
                <th style="width: 30%">Last Name</th>
                <th style="width: 30%">Username</th>
                <th style="width: 30%">Email</th>
                <th style="width: 30%">Age</th>
                <th style="width: 10%"></th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let user of users">
                <td>{{user.firstName}}</td>
                <td>{{user.lastName}}</td>
                <td>{{user.username}}</td>
                <td>{{user.email}}</td>
                <td>{{user.age}}</td>
                <td style="white-space: nowrap">
                    <button (click)="deleteUser(user.id)" class="btn btn-sm btn-danger btn-delete-user"
                            [disabled]="user.isDeleting">
                        <span *ngIf="user.isDeleting" class="spinner-border spinner-border-sm"></span>
                        <span *ngIf="!user.isDeleting">Delete</span>
                    </button>
                </td>
            </tr>
            <tr *ngIf="!users">
                <td colspan="4" class="text-center">
                    <span class="spinner-border spinner-border-lg align-center"></span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
